<template>
  <div class="app-container">
   <!-- <div id="label" />
    <div id="container" />
    <video id="video" autoplay loop muted /> -->
    <iframe src="/demo/demo.html"
    id='bdIframe'
    ref="bdIframe"
    frameborder="no"
    tyle="width: 100%;height: 100%"
    scrolling="no" />
  </div>

</template>

<script>
import TbWmsLocationApi from '@/api/web/TbWmsLocationApi'

export default {
  name: 'TbWmsLocation3D',
  components: {

  },
  data() {
    return {
      records: []
    }
  },
  created(){
  },
  methods: {
    init(){

    },
    handleQuery() {
    	TbWmsLocationApi.list().then(response => {
    		this.records = response.data

        let that = this;

        window.addEventListener('message', function (e) {
          var res = e.data;
          console.log(res);
          // 向iframe传值
          const mapFrame = document.getElementById('bdIframe');
          const iframeWin = mapFrame.contentWindow;
          console.log(that.records)
          iframeWin.postMessage({
              params: that.records
            },'*');
        });
    	})

    },
    adjustIframe(){
        const oIframe = this.$refs['bdIframe'];
        const deviceWidth = document.documentElement.clientWidth;
        const deviceHeight = document.documentElement.clientHeight;
        oIframe.style.width = (Number(deviceWidth)-265) + 'px'; //数字是页面布局宽度差值
        oIframe.style.height = (Number(deviceHeight)-120) + 'px'; //数字是页面布局高度差
    },
    sendMesFroIframe() {
      console.log("11")

    }
  },
  mounted(){
    this.init()
    this.handleQuery();
    this.adjustIframe();



  }
}

</script>

<style>

  body {
    margin: 0;
    overflow: hidden;
  }

  #label {
    position: absolute;
    padding: 10px;
    background: rgba(255, 255, 255, 0.6);
    line-height: 1;
    border-radius: 5px;
  }

  #video {
    position: absolute;
    width: 0;
    height: 0;
  }

</style>
